
<template>
  <div class="f ac tr rw">
    <div v-for="item in searchList" :key="item.id">
      <div v-if="item.isShow">
        <InputCom v-if="item.type == 'input'" :item="item" :searchList="searchList" @setSearchList="e=>emit('setSearchList', e)" @changeSearch="e => emit('changeSearch', e)"></InputCom>
        <SelectCom v-if="item.type == 'select'" :item="item" :searchList="searchList" @setSearchList="e=>emit('setSearchList', e)" @changeSearch="e => emit('changeSearch', e)"></SelectCom>
        <DateRangeCom v-if="item.type == 'dateRange'" :item="item" :searchList="searchList" @setSearchList="e=>emit('setSearchList', e)" @changeSearch="e => emit('changeSearch', e)"></DateRangeCom>
      </div>
    </div>
    <div class="f ac mb10">
      <div v-if="isShowSearch" class="pt5 pb5 pl20 pr20 rds40 f ac xc gf mr10 poi" style="background:#ec6102" @click="search">查询</div>
      <div v-if="isShowReset" class="pt5 pb5 pl20 pr20 rds40 f ac xc poi" style="border:1px solid #ccc;" @click="reset">重置</div>
      <div v-if="isShowSpread" class="poi f ac g1aada7 ml10 none" @click="toogleSpread">
        <div>{{isSpread ? '收起' : '展开' }}</div>
        <div :class="['trans3 f ac ml5', isSpread ? 'tr180' : '']" style="transform-origin:center center;">
          <div class="" style="width:6px;height:6px;border-left:1px solid #666;border-bottom:1px solid #666;transform:translateY(-2px) rotate(-45deg)"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  /*
    <SearchRender
      :searchList="searchList"
      @setSearchList="e => searchList = e"
      @changeSearch="e => changeSearch(e)"
    >
    </SearchRender>
    // js数据
    searchList: [
      {type:'dateRange', label: '发送日期', key:'sendDate', placeholder:'请选择', value: '', _value: '', isShow: true, _isShow: true, id: _.guID(), },
      {type:'select', label: '发送状态', key:'status', placeholder:'请选择', value: '',  _value: '', isShow: true, _isShow: true,   options: [{name:'全部', value:'0'}, {name:'待发送', value:'1'}, {name:'发送成功', value:'2'}, {name:'发送失败', value:'3'}, {name:'发送中', value:'4'}], url: '', params: {currentPage: 1, pageSize: 999}, nameField:'', valueField: '', id: _.guID()},
      {type:'multipleSelect', label: '可选地区', key:'area', placeholder:'请选择', value: [],  _value: [], isShow: true, _isShow: true,   options: [{name:'全部', value:'0'}, {name:'待发送', value:'1'}, {name:'发送成功', value:'2'}, {name:'发送失败', value:'3'}, {name:'发送中', value:'4'}], url: '', params: {currentPage: 1, pageSize: 999}, nameField:'', valueField: '', id: _.guID()},
      {type:'highSelect', label: '患者标签', key:'patientTagId', placeholder:'请选择', value: '',  _value: '', isShow: true, _isShow: true,  options: [{id:'1', name:'慢病', children: [{id:'11', name: '糖尿病'}]}], id: _.guID()},
      {type:'input', label: '短信签名', key:'messageSign', placeholder:'请输入', value: '',  _value: '', isShow: true, _isShow: true, id: _.guID(), },
      {type:'secondSelet', label: '签约状态', key:'signState', value: {value1: '', value2: ''},  _value: {value1: '', value2: ''}, isShow: true, _isShow: true, placeholder:'请选择', options1:[{name:'慢病',value:'1'},{name: '公卫', value:'2'}], options2: [{name:'全部',value:'0'},{name:'已过期',value:'1'},{name:'已签约',value:'2'},{name:'未签约',value:'3'}], id: _.guID()},
    ]
  */
  import { ref, computed } from "vue"
  import InputCom from "./components/InputCom.vue"
  import SelectCom from "./components/SelectCom.vue"
  import DateRangeCom from "./components/DateRangeCom.vue"
  /*************************************** */
  /**************data********************* */
  /*************************************** */
  const props = defineProps({
    item: {type: Object, default: () => ({}) },
    searchList: { type: Array, default: () => [] },
    isShowSpread: { type: Boolean, default: false },
    isShowSearch: { type: Boolean, default: false },
    isShowReset: { type: Boolean, default: true },
  })
  const emit = defineEmits(['setSearchList', 'changeSearch'])
  let isSpread = ref(false)
  let paramsObj = computed(() => {
    const newArr = _.deepCopy(props.searchList)
    return newArr.reduce((prev, item) => (prev[item.key] = item.value, prev), {})
  })
  /*************************************** */
  /**************function***************** */
  /*************************************** */
  // 获取参数
  const getParams = function () {
    return props.searchList.reduce((prev, item) => (prev[item.key] = item.value, prev), {})
  }
  // 搜索
  const search = function () {
    emit('changeSearch', {currentPage: 1, ...paramsObj.value })
  }
  // 重置
  const reset = function () {
    let searchList = props.searchList.map(v => ({...v, value: v._value}))
    // searchList = _.recursionSet(searchList)
    const paramsObj = searchList.reduce((prev, item) => (prev[item.key] = item.value, prev), {})
    if(!_.looseEqual(props.searchList, searchList)){ emit('setSearchList', searchList) }
    emit('changeSearch', {currentPage: 1, ...paramsObj })
  }
  // 切换是否展开
  const toogleSpread = function () {
    isSpread.value = !isSpread.value
    const searchList = props.searchList.map(v => ({...v, isShow: isSpread.value ? true : v._isShow }))
    emit('setSearchList', searchList)
  }
</script>
<style scoped></style>